<template>
<!-- 商品页 -->
  <div class="content">
    <aside>
      <van-sidebar v-model="activeKey" @change="tab">
        <van-sidebar-item :title="item.name" v-for="(item,key) in good" :key="key" />
      </van-sidebar>
    </aside>
    <main>
      <!--对应的标题 -->
      <p>{{Name}}</p>
      <van-card
        v-for="(item,key) in food"
        :key="key"
        :num="item.number"
        :price="item.price"
        :desc="item.description"
        :title="item.name"
        :thumb="item.image"
        @click="btnDetail(item)"
      >
        <template #tags>
          <span>月售{{item.sellCount}} 好评率{{item.rating}}%</span>
        </template>
        <template #num>
          <van-stepper
            v-model="item.number"
            theme="round"
            button-size="18"
            disable-input
            @plus="jia(item)"
            @minus="jian(item)"
          />
        </template>
      </van-card>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      // 侧边栏数据
      good: [],
      // 右边内容
      food: [],
      Name: {}
    };
  },
  async mounted() {
    let { data: res } = await this.$http.get("/mock/data.json");
    // console.log(res);
    this.good = res.goods;
    this.tab(0);
  },
  methods: {
    // 点击切换
    tab(index) {
      // 对应的内容
      this.food = this.good[index].foods;
      // 对应的标题
      this.Name = this.good[index].name;
    },
    // 加入购物车
    jia(i) {
      this.$store.commit("addShop", i);
    },
    // 减数量
    jian(it) {
      this.$store.commit("minus", it);
      console.log(it);
    },
    // 点击跳转到详情页
    btnDetail(item) {
      this.$store.commit("btnDetail", item);
      this.$router.push("/details");
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  flex: 1;
  height: 100%;
  display: flex;
  aside {
    width: 25%;
    height: 100%;
    overflow-y: auto;
  }
  main {
    height: 100%;
    width: 75%;
    overflow-y: auto;
    
  }
}
</style>